<!DOCTYPE HTML>
<html lang="en" >
    
    <head>
        
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>HTML表单 | Introduction</title>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <meta name="description" content="">
        <meta name="generator" content="GitBook 2.6.7">
        
        
        <meta name="HandheldFriendly" content="true"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../../gitbook/images/apple-touch-icon-precomposed-152.png">
        <link rel="shortcut icon" href="../../gitbook/images/favicon.ico" type="image/x-icon">
        
    <link rel="stylesheet" href="../../gitbook/style.css">
    
        
        <link rel="stylesheet" href="../../gitbook/plugins/gitbook-plugin-highlight/website.css">
        
    
        
        <link rel="stylesheet" href="../../gitbook/plugins/gitbook-plugin-search/search.css">
        
    
        
        <link rel="stylesheet" href="../../gitbook/plugins/gitbook-plugin-fontsettings/website.css">
        
    
    

        
    
    
    <link rel="next" href="../../home/CSS_c/1.CSS基本语法.html" />
    
    
    <link rel="prev" href="../../home/HTML_h/9.HTML表格.html" />
    

        
    </head>
    <body>
        
        
    <div class="book"
        data-level="1.10"
        data-chapter-title="HTML表单"
        data-filepath="home/HTML_h/10.HTML表单.md"
        data-basepath="../.."
        data-revision="Sat Nov 17 2018 12:52:35 GMT+0800 (中国标准时间)"
        data-innerlanguage="">
    

<div class="book-summary">
    <nav role="navigation">
        <ul class="summary">
            
            
            
            

            

            
    
        <li class="chapter " data-level="0" data-path="index.html">
            
                
                    <a href="../../index.html">
                
                        <i class="fa fa-check"></i>
                        
                        Introduction
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1" data-path="home/HTML_h/html.html">
            
                
                    <a href="../../home/HTML_h/html.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.</b>
                        
                        HTML
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.1" data-path="home/HTML_h/1.HTML概述和基本结构.html">
            
                
                    <a href="../../home/HTML_h/1.HTML概述和基本结构.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.1.</b>
                        
                        HTML概述和基本结构
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.2" data-path="home/HTML_h/2.HTML中Head头.html">
            
                
                    <a href="../../home/HTML_h/2.HTML中Head头.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.2.</b>
                        
                        HTML中Head头
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.3" data-path="home/HTML_h/3.HTML标题.html">
            
                
                    <a href="../../home/HTML_h/3.HTML标题.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.3.</b>
                        
                        HTML标题
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.4" data-path="home/HTML_h/4.HTML段落,换行,字符实体.html">
            
                
                    <a href="../../home/HTML_h/4.HTML段落,换行,字符实体.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.4.</b>
                        
                        HTML段落,换行,字符实体
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.5" data-path="home/HTML_h/5.HTML块,含样式的标签.html">
            
                
                    <a href="../../home/HTML_h/5.HTML块,含样式的标签.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.5.</b>
                        
                        HTML块,含样式的标签
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.6" data-path="home/HTML_h/6.HTML图片.html">
            
                
                    <a href="../../home/HTML_h/6.HTML图片.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.6.</b>
                        
                        HTML图片
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.7" data-path="home/HTML_h/7.HTML链接.html">
            
                
                    <a href="../../home/HTML_h/7.HTML链接.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.7.</b>
                        
                        HTML链接
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.8" data-path="home/HTML_h/8.HTML列表.html">
            
                
                    <a href="../../home/HTML_h/8.HTML列表.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.8.</b>
                        
                        HTML列表
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.9" data-path="home/HTML_h/9.HTML表格.html">
            
                
                    <a href="../../home/HTML_h/9.HTML表格.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.9.</b>
                        
                        HTML表格
                    </a>
            
            
        </li>
    
        <li class="chapter active" data-level="1.10" data-path="home/HTML_h/10.HTML表单.html">
            
                
                    <a href="../../home/HTML_h/10.HTML表单.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.10.</b>
                        
                        HTML表单
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2" data-path="home/HTML_h/css.html">
            
            <span><b>2.</b> CSS</span>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.1" data-path="home/CSS_c/1.CSS基本语法.html">
            
                
                    <a href="../../home/CSS_c/1.CSS基本语法.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.1.</b>
                        
                        CSS基本语法
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.2" data-path="home/CSS_c/2.CSS选择器.html">
            
                
                    <a href="../../home/CSS_c/2.CSS选择器.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.2.</b>
                        
                        CSS选择器
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.3" data-path="home/CSS_c/3.CSS颜色,文本字体.html">
            
                
                    <a href="../../home/CSS_c/3.CSS颜色,文本字体.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.</b>
                        
                        CSS颜色,文本字体
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.4" data-path="home/CSS_c/4.边框,背景,边距,溢出.html">
            
                
                    <a href="../../home/CSS_c/4.边框,背景,边距,溢出.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.4.</b>
                        
                        边框,背景,边距,溢出
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.5" data-path="home/CSS_c/5.盒子.html">
            
                
                    <a href="../../home/CSS_c/5.盒子.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.5.</b>
                        
                        盒子
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.6" data-path="home/CSS_c/6.元素,内联元素,内联块元素.html">
            
                
                    <a href="../../home/CSS_c/6.元素,内联元素,内联块元素.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.6.</b>
                        
                        元素,内联元素,内联块元素
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.7" data-path="home/CSS_c/7.浮动.html">
            
                
                    <a href="../../home/CSS_c/7.浮动.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.7.</b>
                        
                        浮动
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8" data-path="home/CSS_c/8.定位.html">
            
                
                    <a href="../../home/CSS_c/8.定位.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.</b>
                        
                        定位
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="3" data-path="home/JavaScript_j/JavaScript.html">
            
                
                    <a href="../../home/JavaScript_j/JavaScript.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.</b>
                        
                        JavaScript
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="3.1" data-path="home/JavaScript_j/1.js使用场景.html">
            
                
                    <a href="../../home/JavaScript_j/1.js使用场景.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.1.</b>
                        
                        js使用场景
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.2" data-path="home/JavaScript_j/2.js变量.html">
            
                
                    <a href="../../home/JavaScript_j/2.js变量.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.2.</b>
                        
                        js变量
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.3" data-path="home/JavaScript_j/3.js数据类型转换.html">
            
                
                    <a href="../../home/JavaScript_j/3.js数据类型转换.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.3.</b>
                        
                        js数据类型转换
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.4" data-path="home/JavaScript_j/4.js运算符.html">
            
                
                    <a href="../../home/JavaScript_j/4.js运算符.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.4.</b>
                        
                        js运算符
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.5" data-path="home/JavaScript_j/5.js流程控制.html">
            
                
                    <a href="../../home/JavaScript_j/5.js流程控制.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.5.</b>
                        
                        js流程控制
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.6" data-path="home/JavaScript_j/6.js循环.html">
            
                
                    <a href="../../home/JavaScript_j/6.js循环.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.6.</b>
                        
                        js循环
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.7" data-path="home/JavaScript_j/7.js元素获取与操作.html">
            
                
                    <a href="../../home/JavaScript_j/7.js元素获取与操作.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.7.</b>
                        
                        js元素获取与操作
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.8" data-path="home/JavaScript_j/8.js定时器.html">
            
                
                    <a href="../../home/JavaScript_j/8.js定时器.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.8.</b>
                        
                        js定时器
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.9" data-path="home/JavaScript_j/9.js函数.html">
            
                
                    <a href="../../home/JavaScript_j/9.js函数.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.9.</b>
                        
                        js函数
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.10" data-path="home/JavaScript_j/10.js对象.html">
            
                
                    <a href="../../home/JavaScript_j/10.js对象.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.10.</b>
                        
                        js对象
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.11" data-path="home/JavaScript_j/11.js数组.html">
            
                
                    <a href="../../home/JavaScript_j/11.js数组.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.11.</b>
                        
                        js数组
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.12" data-path="home/JavaScript_j/12.js数学对象Math.html">
            
                
                    <a href="../../home/JavaScript_j/12.js数学对象Math.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.12.</b>
                        
                        js数学对象Math
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.13" data-path="home/JavaScript_j/13.js正则.html">
            
                
                    <a href="../../home/JavaScript_j/13.js正则.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.13.</b>
                        
                        js正则
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="4" data-path="home/jQuery_j/jQuery.html">
            
                
                    <a href="../../home/jQuery_j/jQuery.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.</b>
                        
                        jQuery
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="4.1" data-path="home/jQuery_j/1.jquery选择器.html">
            
                
                    <a href="../../home/jQuery_j/1.jquery选择器.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.1.</b>
                        
                        jquery选择器
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="4.2" data-path="home/jQuery_j/2.jQuery元素操作.html">
            
                
                    <a href="../../home/jQuery_j/2.jQuery元素操作.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.2.</b>
                        
                        jQuery元素操作
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="4.3" data-path="home/jQuery_j/3.相关尺寸.html">
            
                
                    <a href="../../home/jQuery_j/3.相关尺寸.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.3.</b>
                        
                        相关尺寸
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="4.4" data-path="home/jQuery_j/4.jQuery事件.html">
            
                
                    <a href="../../home/jQuery_j/4.jQuery事件.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.4.</b>
                        
                        jQuery事件
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="4.5" data-path="home/jQuery_j/5.jquery元素节点操作.html">
            
                
                    <a href="../../home/jQuery_j/5.jquery元素节点操作.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.5.</b>
                        
                        jquery元素节点操作
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="5" data-path="home/AJAX/AJAX.html">
            
                
                    <a href="../../home/AJAX/AJAX.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>5.</b>
                        
                        AJAX
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="6" data-path="home/VUE/vue.html">
            
                
                    <a href="../../home/VUE/vue.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>6.</b>
                        
                        VUE
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="6.1" data-path="home/VUE/1.创建第一个vue实例.html">
            
                
                    <a href="../../home/VUE/1.创建第一个vue实例.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>6.1.</b>
                        
                        创建第一个vue实例
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="6.2" data-path="home/VUE/2.模版语法和基本指令.html">
            
                
                    <a href="../../home/VUE/2.模版语法和基本指令.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>6.2.</b>
                        
                        模版语法和基本指令
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="6.3" data-path="home/VUE/3.Vue中的计算属性和侦听器.html">
            
                
                    <a href="../../home/VUE/3.Vue中的计算属性和侦听器.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>6.3.</b>
                        
                        Vue中的计算属性和侦听器
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    


            
            <li class="divider"></li>
            <li>
                <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
                    Published with GitBook
                </a>
            </li>
            
        </ul>
    </nav>
</div>

    <div class="book-body">
        <div class="body-inner">
            <div class="book-header" role="navigation">
    <!-- Actions Left -->
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="../../" >Introduction</a>
    </h1>
</div>

            <div class="page-wrapper" tabindex="-1" role="main">
                <div class="page-inner">
                
                
                    <section class="normal" id="section-">
                    
                        <h1 id="html&#x8868;&#x5355;">HTML&#x8868;&#x5355;</h1>
<hr>
<blockquote>
<p>&#x8868;&#x5355;&#x7528;&#x4E8E;&#x641C;&#x96C6;&#x4E0D;&#x540C;&#x7C7B;&#x578B;&#x7684;&#x7528;&#x6237;&#x8F93;&#x5165;&#xFF0C;&#x8868;&#x5355;&#x7531;&#x4E0D;&#x540C;&#x7C7B;&#x578B;&#x7684;&#x6807;&#x7B7E;&#x7EC4;&#x6210;&#xFF0C;&#x5B9E;&#x73B0;&#x4E00;&#x4E2A;&#x7279;&#x5B9A;&#x529F;&#x80FD;&#x7684;&#x8868;&#x5355;&#x533A;&#x57DF;&#xFF08;&#x6BD4;&#x5982;&#xFF1A;&#x6CE8;&#x518C;&#xFF09;&#xFF0C;</p>
<p>&#x9996;&#x5148;&#x5E94;&#x8BE5;&#x7528;<form>&#x6807;&#x7B7E;&#x6765;&#x5B9A;&#x4E49;&#x8868;&#x5355;&#x533A;&#x57DF;&#x6574;&#x4F53;&#xFF0C;&#x5728;&#x6B64;&#x6807;&#x7B7E;&#x4E2D;&#x518D;&#x4F7F;&#x7528;&#x4E0D;&#x540C;&#x7684;&#x8868;&#x5355;&#x63A7;&#x4EF6;&#x6765;&#x5B9E;&#x73B0;&#x4E0D;&#x540C;&#x7C7B;&#x578B;&#x7684;&#x4FE1;&#x606F;&#x8F93;&#x5165;&#xFF0C;</form></p>
<p>&#x5177;&#x4F53;&#x5B9E;&#x73B0;&#x53CA;&#x6CE8;&#x91CA;&#x53EF;&#x53C2;&#x7167;&#x4EE5;&#x4E0B;&#x4F2A;&#x4EE3;&#x7801;&#xFF1A;</p>
</blockquote>
<pre><code class="lang-html"><span class="hljs-comment">&lt;!-- 
    form&#x5B9A;&#x4E49;&#x4E00;&#x4E2A;&#x8868;&#x5355;&#x533A;&#x57DF;,action&#x5C5E;&#x6027;&#x5B9A;&#x4E49;&#x8868;&#x5355;&#x6570;&#x636E;&#x63D0;&#x4EA4;&#x7684;&#x5730;&#x5740;&#xFF0C;method&#x5C5E;&#x6027;&#x5B9A;&#x4E49;&#x63D0;&#x4EA4;&#x7684;&#x65B9;&#x5F0F;&#x3002;
    &#x5982;&#x679C;&#x8868;&#x5355;&#x4E2D;&#x542B;&#x6709;&#x6587;&#x4EF6;&#x4E0A;&#x4F20; 
    method&#x63D0;&#x4EA4;&#x65B9;&#x5F0F;&#x5FC5;&#x987B;&#x4E3A;post 
    form&#x4E2D;&#x5FC5;&#x987B;&#x6709;enctype&#x5C5E;&#x6027;
    enctype=&quot;multipart/form-data&quot;

   --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">form</span> <span class="hljs-attribute">action</span>=<span class="hljs-value">&quot;http://www...&quot;</span> <span class="hljs-attribute">method</span>=<span class="hljs-value">&quot;get&quot;</span>&gt;</span>

    <span class="hljs-comment">&lt;!-- label&#x6807;&#x7B7E;&#x5B9A;&#x4E49;&#x8868;&#x5355;&#x63A7;&#x4EF6;&#x7684;&#x6587;&#x5B57;&#x6807;&#x6CE8;&#xFF0C;input&#x7C7B;&#x578B;&#x4E3A;text&#x5B9A;&#x4E49;&#x4E86;&#x4E00;&#x4E2A;&#x5355;&#x884C;&#x6587;&#x672C;&#x8F93;&#x5165;&#x6846; --&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">label</span>&gt;</span>&#x59D3;&#x540D;&#xFF1A;<span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">&quot;text&quot;</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">&quot;username&quot;</span> /&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>

    <span class="hljs-comment">&lt;!-- input&#x7C7B;&#x578B;&#x4E3A;password&#x5B9A;&#x4E49;&#x4E86;&#x4E00;&#x4E2A;&#x5BC6;&#x7801;&#x8F93;&#x5165;&#x6846; --&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">label</span>&gt;</span>&#x5BC6;&#x7801;&#xFF1A;<span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">&quot;password&quot;</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">&quot;password&quot;</span> /&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>

    <span class="hljs-comment">&lt;!-- input&#x7C7B;&#x578B;&#x4E3A;radio&#x5B9A;&#x4E49;&#x4E86;&#x5355;&#x9009;&#x6846; --&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">label</span>&gt;</span>&#x6027;&#x522B;&#xFF1A;<span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">label</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">&quot;radio&quot;</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">&quot;gender&quot;</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">&quot;0&quot;</span> /&gt;</span> &#x7537;<span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">label</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">&quot;radio&quot;</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">&quot;gender&quot;</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">&quot;1&quot;</span> /&gt;</span> &#x5973;<span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>

    <span class="hljs-comment">&lt;!-- input&#x7C7B;&#x578B;&#x4E3A;checkbox&#x5B9A;&#x4E49;&#x4E86;&#x5355;&#x9009;&#x6846; --&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">label</span>&gt;</span>&#x7231;&#x597D;&#xFF1A;<span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">label</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">&quot;checkbox&quot;</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">&quot;like&quot;</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">&quot;sing&quot;</span> /&gt;</span> &#x5531;&#x6B4C;<span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">label</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">&quot;checkbox&quot;</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">&quot;like&quot;</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">&quot;run&quot;</span> /&gt;</span> &#x8DD1;&#x6B65;<span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">label</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">&quot;checkbox&quot;</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">&quot;like&quot;</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">&quot;swiming&quot;</span> /&gt;</span> &#x6E38;&#x6CF3;<span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>

    <span class="hljs-comment">&lt;!-- input&#x7C7B;&#x578B;&#x4E3A;file&#x5B9A;&#x4E49;&#x4E0A;&#x4F20;&#x7167;&#x7247;&#x6216;&#x6587;&#x4EF6;&#x7B49;&#x8D44;&#x6E90; --&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">label</span>&gt;</span>&#x7167;&#x7247;&#xFF1A;<span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">&quot;file&quot;</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">&quot;person_pic&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>

    <span class="hljs-comment">&lt;!-- textarea&#x5B9A;&#x4E49;&#x591A;&#x884C;&#x6587;&#x672C;&#x8F93;&#x5165; --&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">label</span>&gt;</span>&#x4E2A;&#x4EBA;&#x63CF;&#x8FF0;&#xFF1A;<span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">textarea</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">&quot;about&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">textarea</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>

    <span class="hljs-comment">&lt;!-- select&#x5B9A;&#x4E49;&#x4E0B;&#x62C9;&#x5217;&#x8868;&#x9009;&#x62E9; --&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">label</span>&gt;</span>&#x7C4D;&#x8D2F;&#xFF1A;<span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">select</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">&quot;site&quot;</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">&quot;0&quot;</span>&gt;</span>&#x5317;&#x4EAC;<span class="hljs-tag">&lt;/<span class="hljs-title">option</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">&quot;1&quot;</span>&gt;</span>&#x4E0A;&#x6D77;<span class="hljs-tag">&lt;/<span class="hljs-title">option</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">&quot;2&quot;</span>&gt;</span>&#x5E7F;&#x5DDE;<span class="hljs-tag">&lt;/<span class="hljs-title">option</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">&quot;3&quot;</span>&gt;</span>&#x6DF1;&#x5733;<span class="hljs-tag">&lt;/<span class="hljs-title">option</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-title">select</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>

    <span class="hljs-comment">&lt;!-- input&#x7C7B;&#x578B;&#x4E3A;submit&#x5B9A;&#x4E49;&#x63D0;&#x4EA4;&#x6309;&#x94AE;
        &#x8FD8;&#x53EF;&#x4EE5;&#x7528;&#x56FE;&#x7247;&#x63A7;&#x4EF6;&#x4EE3;&#x66FF;submit&#x6309;&#x94AE;&#x63D0;&#x4EA4;&#xFF0C;&#x4E00;&#x822C;&#x4F1A;&#x5BFC;&#x81F4;&#x63D0;&#x4EA4;&#x4E24;&#x6B21;&#xFF0C;&#x4E0D;&#x5EFA;&#x8BAE;&#x4F7F;&#x7528;&#x3002;&#x5982;&#xFF1A;
        &lt;input type=&quot;image&quot; src=&quot;xxx.gif&quot;&gt;
    --&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">&quot;submit&quot;</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">&quot;&quot;</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">&quot;&#x63D0;&#x4EA4;&quot;</span>&gt;</span>

        <span class="hljs-comment">&lt;!-- input&#x7C7B;&#x578B;&#x4E3A;reset&#x5B9A;&#x4E49;&#x91CD;&#x7F6E;&#x6309;&#x94AE; --&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">&quot;reset&quot;</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">&quot;&quot;</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">&quot;&#x91CD;&#x7F6E;&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>

<span class="hljs-tag">&lt;/<span class="hljs-title">form</span>&gt;</span>
</code></pre>
<blockquote>
<p>input&#x8868;&#x5355;&#x9879;&#x4E2D;&#x7684;&#x5C5E;&#x6027;&#xFF0C;&#x53EF;&#x4EE5;&#x63D0;&#x4F9B;</p>
</blockquote>
<pre><code class="lang-html">*type&#x5C5E;&#x6027;:&#x8868;&#x793A;&#x8868;&#x5355;&#x9879;&#x7684;&#x7C7B;&#x578B;:&#x503C;&#x5982;&#x4E0B;:

    text:&#x5355;&#x884C;&#x6587;&#x672C;&#x6846;

    password:&#x5BC6;&#x7801;&#x8F93;&#x5165;&#x6846;

    checkbox:&#x591A;&#x9009;&#x6846; &#x6CE8;&#x610F;&#x8981;&#x63D0;&#x4F9B;value&#x503C;

    radio:&#x5355;&#x9009;&#x6846; &#x6CE8;&#x610F;&#x8981;&#x63D0;&#x4F9B;value&#x503C;

    file:&#x6587;&#x4EF6;&#x4E0A;&#x4F20;&#x9009;&#x62E9;&#x6846;

    button:&#x666E;&#x901A;&#x6309;&#x94AE;

    submit:&#x63D0;&#x4EA4;&#x6309;&#x94AE;

    image:&#x56FE;&#x7247;&#x63D0;&#x4EA4;&#x6309;&#x94AE;

    reset:&#x91CD;&#x7F6E;&#x6309;&#x94AE;, &#x8FD8;&#x539F;&#x5230;&#x5F00;&#x59CB;\(&#x7B2C;&#x4E00;&#x6B21;&#x6253;&#x5F00;&#x65F6;\)&#x7684;&#x6548;&#x679C;

    hidden:&#x4E3B;&#x8868;&#x5355;&#x9690;&#x85CF;&#x57DF;,&#x8981;&#x662F;&#x548C;&#x8868;&#x5355;&#x4E00;&#x5757;&#x63D0;&#x4EA4;&#x7684;&#x4FE1;&#x606F;,&#x4F46;&#x662F;&#x4E0D;&#x9700;&#x8981;&#x7528;&#x6237;&#x4FEE;&#x6539;

*name&#x5C5E;&#x6027;:&#x8868;&#x5355;&#x9879;&#x540D;,&#x7528;&#x4E8E;&#x5B58;&#x50A8;&#x5185;&#x5BB9;&#x503C;&#x7684;

*value&#x5C5E;&#x6027;:&#x8F93;&#x5165;&#x7684;&#x503C;\(&#x9ED8;&#x8BA4;&#x6307;&#x5B9A;&#x503C;\)

size&#x5C5E;&#x6027;:&#x8F93;&#x5165;&#x6846;&#x7684;&#x5BBD;&#x5EA6;&#x503C;

maxlength&#x5C5E;&#x6027;:&#x8F93;&#x5165;&#x6846;&#x7684;&#x8F93;&#x5165;&#x5185;&#x5BB9;&#x7684;&#x6700;&#x5927;&#x957F;&#x5EA6;

readonly&#x5C5E;&#x6027;:&#x5BF9;&#x8F93;&#x5165;&#x6846;&#x53EA;&#x8BFB;&#x5C5E;&#x6027;

*disabled&#x5C5E;&#x6027;:&#x7981;&#x7528;&#x5C5E;&#x6027;

*checked&#x5C5E;&#x6027;:&#x5BF9;&#x9009;&#x62E9;&#x6846;&#x6307;&#x5B9A;&#x9ED8;&#x8BA4;&#x9009;&#x9879;

src&#x548C;alt&#x662F;&#x4E3A;&#x56FE;&#x7247;&#x6309;&#x94AE;&#x8BBE;&#x7F6E;&#x7684;

    &#x6CE8;&#x610F;&#xFF1A;reset&#x91CD;&#x7F6E;&#x6309;&#x94AE;&#x662F;&#x5C06;&#x8868;&#x5355;&#x6570;&#x636E;&#x6062;&#x590D;&#x5230;&#x7B2C;&#x4E00;&#x6B21;&#x6253;&#x5F00;&#x65F6;&#x7684;&#x72B6;&#x6001;&#xFF0C;&#x5E76;&#x4E0D;&#x662F;&#x6E05;&#x7A7A;

    image&#x56FE;&#x7247;&#x6309;&#x94AE;&#xFF0C;&#x9ED8;&#x8BA4;&#x5177;&#x6709;&#x63D0;&#x4EA4;&#x8868;&#x5355;&#x529F;&#x80FD;&#x3002;

placeholder &#x5C5E;&#x6027;&#x89C4;&#x5B9A;&#x53EF;&#x63CF;&#x8FF0;&#x8F93;&#x5165;&#x5B57;&#x6BB5;&#x9884;&#x671F;&#x503C;&#x7684;&#x7B80;&#x77ED;&#x7684;&#x63D0;&#x793A;&#x4FE1;&#x606F;&#xFF08;&#x6BD4;&#x5982;&#xFF1A;&#x4E00;&#x4E2A;&#x6837;&#x672C;&#x503C;&#x6216;&#x8005;&#x9884;&#x671F;&#x683C;&#x5F0F;&#x7684;&#x77ED;&#x63CF;&#x8FF0;&#xFF09;&#x3002;
    &#x8BE5;&#x63D0;&#x793A;&#x4F1A;&#x5728;&#x7528;&#x6237;&#x8F93;&#x5165;&#x503C;&#x4E4B;&#x524D;&#x663E;&#x793A;&#x5728;&#x8F93;&#x5165;&#x5B57;&#x6BB5;&#x4E2D;&#x3002;
    &#x6CE8;&#x610F;&#xFF1A;placeholder &#x5C5E;&#x6027;&#x9002;&#x7528;&#x4E8E;&#x4E0B;&#x9762;&#x7684; input &#x7C7B;&#x578B;&#xFF1A;text&#x3001;search&#x3001;url&#x3001;tel&#x3001;email &#x548C; password&#x3002;
</code></pre>
<h2 id="&#x6548;&#x679C;&#x5982;&#x4E0B;&#xFF1A;">&#x6548;&#x679C;&#x5982;&#x4E0B;&#xFF1A;</h2>
<form action="http://www..." method="get">
    <!-- label标签定义表单控件的文字标注，input类型为text定义了一个单行文本输入框 -->
    <p>
        <label>&#x59D3;&#x540D;&#xFF1A;</label>
        <input type="text" name="username">
    </p>
    <!-- input类型为password定义了一个密码输入框 -->
    <p>
        <label>&#x5BC6;&#x7801;&#xFF1A;</label>
        <input type="password" name="password">
    </p>
    <!-- input类型为radio定义了单选框 -->
    <p>
        <label>&#x6027;&#x522B;&#xFF1A;</label>
        <label><input type="radio" name="gender" value="0"> &#x7537;</label>
        <label><input type="radio" name="gender" value="1"> &#x5973;</label>
    </p>
    <!-- input类型为checkbox定义了单选框 -->
    <p>
        <label>&#x7231;&#x597D;&#xFF1A;</label>
        <label><input type="checkbox" name="like" value="sing"> &#x5531;&#x6B4C;</label>
        <label><input type="checkbox" name="like" value="run"> &#x8DD1;&#x6B65;</label>
        <label><input type="checkbox" name="like" value="swiming"> &#x6E38;&#x6CF3;</label>
    </p>
    <!-- input类型为file定义上传照片或文件等资源 -->
    <p>
        <label>&#x7167;&#x7247;&#xFF1A;</label>
        <input type="file" name="person_pic">
    </p>
    <!-- textarea定义多行文本输入 -->
    <p>
        <label>&#x4E2A;&#x4EBA;&#x63CF;&#x8FF0;&#xFF1A;</label>
        <textarea name="about"></textarea>
    </p>
    <!-- select定义下拉列表选择 -->
    <p>
    <label>&#x7C4D;&#x8D2F;&#xFF1A;</label>
        <select name="site">
            <option value="0">&#x5317;&#x4EAC;</option>
            <option value="1">&#x4E0A;&#x6D77;</option>
            <option value="2">&#x5E7F;&#x5DDE;</option>
            <option value="3">&#x6DF1;&#x5733;</option>
        </select>
    </p>
    <!-- input类型为submit定义提交按钮
        还可以用图片控件代替submit按钮提交，一般会导致提交两次，不建议使用。如：
        <input type="image" src="xxx.gif">
    -->
    <p>
        <input type="submit" name="" value="&#x63D0;&#x4EA4;">
        <!-- input类型为reset定义重置按钮 -->
        <input type="reset" name="" value="&#x91CD;&#x7F6E;">
    </p>
</form>






                    
                    </section>
                
                
                </div>
            </div>
        </div>

        
        <a href="../../home/HTML_h/9.HTML表格.html" class="navigation navigation-prev " aria-label="Previous page: HTML表格"><i class="fa fa-angle-left"></i></a>
        
        
        <a href="../../home/CSS_c/1.CSS基本语法.html" class="navigation navigation-next " aria-label="Next page: CSS基本语法"><i class="fa fa-angle-right"></i></a>
        
    </div>
</div>

        
<script src="../../gitbook/app.js"></script>

    
    <script src="../../gitbook/plugins/gitbook-plugin-search/lunr.min.js"></script>
    

    
    <script src="../../gitbook/plugins/gitbook-plugin-search/search.js"></script>
    

    
    <script src="../../gitbook/plugins/gitbook-plugin-sharing/buttons.js"></script>
    

    
    <script src="../../gitbook/plugins/gitbook-plugin-fontsettings/buttons.js"></script>
    

<script>
require(["gitbook"], function(gitbook) {
    var config = {"highlight":{},"search":{"maxIndexSize":1000000},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2}};
    gitbook.start(config);
});
</script>

        
    </body>
    
</html>
